<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
<!--				<el-form-item-->
<!--					:label="$t('common.belong_merchant') + ':'"-->
<!--					class="flex-row-container"-->
<!--					label-width="77px"-->
<!--				>-->
<!--					<merchant-select-->
<!--						v-model="queryData.merchantId"-->
<!--						:merchantInfo.sync="merchantObj"-->
<!--					></merchant-select>-->
<!--				</el-form-item>-->
				<el-form-item
					:label="
						$t('report.rebate_commission_settlement_time') + ':'
					"
					class="flex-row-container"
					label-width="101px"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerOptionsMonth"
						format="yyyy-MM"
						type="monthrange"
						range-separator="-"
						:start-placeholder="$t('report.start_date')"
						:end-placeholder="$t('report.end_date')"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="$t('report.general_account') + ':'"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.topProxyName"
						clearable
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						:disabled="loading"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('702061')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:disabled="loading"
						:loading="exportLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
				<date-picker-shortcuts
					kind="shortcutsMonth"
					:action="handleShortcutBtnClick"
					:loading="loading"
				/>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				key="father"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				show-summary
				:max-height="tableHeight"
				highlight-current-row
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					fixed
					prop="reportYm"
					align="center"
					:label="$t('report.rebate_commission_settlement_time')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.cycleName ||
								getFormateDate(scope.row.reportYm, 'ym')
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="proxyName"
					align="center"
					:label="$t('report.general_account')"
					show-overflow-tooltip
					:width="140"
					v-if="tableColumnData[$t('report.general_account')]"
				>
					<template slot-scope="scope">
						<Copy :title="scope.row.proxyName" :copy="copy">
							{{ scope.row.proxyName }}
						</Copy>
					</template>
				</el-table-column>
<!--				<el-table-column-->
<!--					prop="merchantName"-->
<!--					align="center"-->
<!--					:label="$t('common.belong_merchant')"-->
<!--					show-overflow-tooltip-->
<!--					v-if="tableColumnData[$t('common.belong_merchant')]"-->
<!--				>-->
<!--					<template slot="header">-->
<!--						{{ $t('common.belong_merchant') }}-->
<!--					</template>-->
<!--					<template slot-scope="scope">-->
<!--						{{ scope.row.merchantName || '-' }}-->
<!--					</template>-->
<!--				</el-table-column>-->
				<el-table-column
					prop="accountStatus"
					align="center"
					min-width="150"
					:label="$t('common.account_status')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('common.account_status')]"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.loginLockStatus === 1"
							class="disableRgba"
						>
							{{ $t('report.login_lock') }}
						</span>
						<span
							v-if="scope.row.paymentLockStatus === 1"
							class="deleteRgba"
						>
							{{ $t('report.account_lock') }}
						</span>
						<span
							v-if="
								scope.row.loginLockStatus === 0 &&
									scope.row.paymentLockStatus === 0
							"
							class="normalRgba"
						>
							{{ $t('report.normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="commissionAmount"
					align="center"
					:label="$t('report.commission')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('report.commission')]"
				>
					<template slot-scope="scope">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.commissionAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="betCount"
					align="center"
					:label="$t('report.bet_count')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('report.bet_count')]"
				>
					<template slot-scope="scope">
						{{ handleNumber('', scope.row.betCount, 0) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betMemberNum"
					align="center"
					:label="$t('report.member_count')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('report.member_count')]"
				>
					<template slot-scope="scope">
						{{ handleNumber('', scope.row.betMemberNum, 0) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betAmount"
					align="center"
					:label="$t('member.bet_amount')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('member.bet_amount')]"
				>
					<template slot-scope="scope">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.betAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="validBetAmount"
					align="center"
					:label="$t('report.total_valid_bet_amount')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('report.total_valid_bet_amount')]"
				>
					<template slot-scope="scope">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.validBetAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="rushAmount"
					align="center"
					:label="$t('report.net_amount')"
					show-overflow-tooltip
					v-if="tableColumnData[$t('report.net_amount')]"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.rushAmount)">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.rushAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'
const end = dayjs().endOf('month')
const start = dayjs()
	.startOf('month')
	.subtract(3, 'month')
const setSearchTime = () => [
	dayjs()
		.startOf('month')
		.subtract(3, 'month'),
	dayjs().endOf('month')
]
export default {
	name: routerNames.commissionReport,
	components: {
		MainContent,
		DatePickerShortcuts
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			exportLoading: false,
			queryData: {},
			searchTime: [start, end],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			merchantObj: '',
			axiosDate: '',
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {
				[this.$t('report.general_account')]: true,
				// [this.$t('common.belong_merchant')]: true,
				[this.$t('common.account_status')]: true,
				[this.$t('report.commission')]: true,
				[this.$t('report.bet_count')]: true,
				[this.$t('report.member_count')]: true,
				[this.$t('member.bet_amount')]: true,
				[this.$t('report.total_valid_bet_amount')]: true,
				[this.$t('report.net_amount')]: true
			}
		}
	},
	computed: {},
	watch: {},
	created() {
		this.initIndexDB('commissionReport', this.activityListField)
	},
	mounted() {},
	methods: {
		handleShortcutBtnClick(val) {
			this.searchTime = val
			this.search()
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			this.dialogColumnData = {
				[this.$t('report.general_account')]: true,
				// [this.$t('common.belong_merchant')]: true,
				[this.$t('common.account_status')]: true,
				[this.$t('report.commission')]: true,
				[this.$t('report.bet_count')]: true,
				[this.$t('report.member_count')]: true,
				[this.$t('member.bet_amount')]: true,
				[this.$t('report.total_valid_bet_amount')]: true,
				[this.$t('report.net_amount')]: true
			}
		},
		loadData() {
			if (+new Date() - 500 < this.axiosDate) return
			const timeArr = this.searchTime || []
			let params = {
				...this.queryData,
				cycleStartDate: timeArr[0]
					? dayjs(timeArr[0])
							.startOf('month')
							.format('YYYYMMDD')
					: undefined,
				cycleEndDate: timeArr[1]
					? dayjs(timeArr[1])
							.endOf('month')
							.format('YYYYMMDD')
					: undefined
			}
			params = this.getParams(params)
			this.tableData = []
			const minM = dayjs(timeArr[0])
			const maxM = dayjs(timeArr[1])
			const month = dayjs(maxM).diff(minM, 'month')
			if (month >= 12) {
				this.$message.warning(this.$t('report.12_month'))
				this.total = 0
				return
			}
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getReportCommissionRebateList(params)
				.then((res) => {
					this.loading = false
					this.axiosDate = +new Date()
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.totalSummary = res?.data?.summary || {}
					this.subSummary = res?.data?.summary?.currentSum || {}
				})
				.catch(() => {
					this.loading = false
				})
			// this.$api
			// 	.getReportCommissionRebateSummary(params)
			// 	.then((res) => {
			// 		this.loading = false
			// 		this.totalSummary = res?.data || {}
			// 	})
			// 	.catch(() => {
			// 		this.loading = false
			// 	})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = setSearchTime()
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				cycleStartDate: timeArr[0]
					? dayjs(timeArr[0])
							.startOf('month')
							.format('YYYYMMDD')
					: undefined,
				cycleEndDate: timeArr[1]
					? dayjs(timeArr[1])
							.endOf('month')
							.format('YYYYMMDD')
					: undefined
			}
			if (params.topProxyName === '') {
				params.topProxyName = undefined
			}
			const minM = dayjs(timeArr[0])
			const maxM = dayjs(timeArr[1])
			const month = dayjs(maxM).diff(minM, 'month')
			if (month >= 12) {
				this.$message.warning(this.$t('report.12_month'))
				return
			}
			this.exportLoading = true
			this.exportExcelPublic({
				api: 'getListTopProxyListPageExport',
				params
			}).finally(() => {
				this.exportLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
